<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  	<title>JQuery Form Wizard</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
 		<link rel="stylesheet" type="text/css" href="./css/ui-lightness/jquery-ui-1.8.2.custom.css" />  
    <style type="text/css">
			#demoWrapper {
				padding : 1em;
				width : 500px;
				border-style: solid;
			}


			#demoNavigation {
				margin-top : 0.5em;
				margin-right : 1em;
				text-align: right;
			}
			
			#data {
				font-size : 0.7em;
			}

			input {
				margin-right: 0.1em;
				margin-bottom: 0.5em;
			}

			.input_field_25em {
				width: 2.5em;
			}

			.input_field_3em {
				width: 3em;
			}

			.input_field_35em {
				width: 3.5em;
			}

			.input_field_12em {
				width: 12em;
			}

			label {
				margin-bottom: 0.2em;
				font-weight: bold;
				font-size: 0.8em;
			}

			.step span {
				float: right;
				font-weight: bold;
				padding-right: 0.8em;
			}

			label.error {
				color: red;
				font-size: 0.8em;
				margin-left : 0.5em;
			}


			.navigation_button {
				width : 70px;
			}
			
			#data {
					overflow : auto;
			}
		</style>
	</head>
  <body>
		<div id="demoWrapper">
			<h3>Example of a branching wizard with common summary page</h3>
			<ul>
			<li>Branching wizard with five steps.</li>
			<li>Branching is decided depending on which country is selected.</li>
			<li>The content (input and labels) of the steps are wrapped with div:s. The div:s have a class="input" set.</li>
			<li>When the summary page is shown, the divs with class="input" are shown in the div with id="summaryContainer".</li>
			<li>When moving back from the summary page, the div:s with class="input" are added back into their normal step.</li>
			</ul>
			<hr />
			<h5 id="status"></h5>
			<form id="demoForm" method="post" action="json.html" class="bbq">
				<div id="fieldWrapper">
				<div class="step" id="first">
					<span class="font_normal_07em_black">Common first step - Name and Country</span><br />
					<div class="input">
						<label for="firstname">First name</label><br />
						<input class="input_field_12em" name="firstname" id="firstname" /><br />
						<label for="surname">Surname</label><br />
						<input class="input_field_12em" name="surname" id="surname" /><br />
						<label for="country">Country</label><br />
						<select class="input_field_12em link required" name="country" id="country">
							<option value=""></option>
							<option value="sweden">Sweden</option>
							<option value="finland">Finland</option>
						</select><br />
					</div>
				</div>
				<div id="sweden" class="step">
					<span class="font_normal_07em_black">Swedish last step - Information</span><br />
					<div class="input">
						<label for="day_se">Social Security Number</label><br />
						<input class="input_field_25em" name="day" id="day_se" value="DD" />
						<input class="input_field_25em" name="month" id="month_se" value="MM" />
						<input class="input_field_3em" name="year" id="year_se" value="YYYY" /> - 
						<input class="input_field_3em" name="lastFour" id="lastFour_se" value="XXXX" /><br />
						<label for="countryPrefix_se">Phone number</label><br />
						<input class="input_field_35em" name="countryPrefix" id="countryPrefix_se" value="+46" /> - 
						<input class="input_field_3em" name="areaCode" id="areaCode_se" /> - 
						<input class="input_field_12em" name="phoneNumber" id="phoneNumber_se" /><br />
						<label for="email_se">*Email</label><br />
						<input class="input_field_12em required email" name="email" id="email_se" /><br />
						<label for="username_se">User name</label><br />
						<input class="input_field_12em" name="username" id="username_se" /><br />
						<label for="password_se">Password</label><br />
						<input class="input_field_12em" name="password" id="password_se" type="password" /><br />
						<label for="retypePassword_se">Retype password</label><br />
						<input class="input_field_12em" name="retypePassword" id="retypePassword_se" type="password" /><br />			
						<input type="hidden" class="link" value="summary" />
					</div>
				</div>
				<div id="finland" class="step">
					<span class="font_normal_07em_black">Finnish Step 2 - Personal information</span><br />
					<div class="input">
						<label for="day_fi">Social Security Number</label><br />
						<input class="input_field_25em" name="day" id="day_fi" value="DD" />
						<input class="input_field_25em" name="month" id="month_fi" value="MM" />
						<input class="input_field_3em" name="year" id="year_fi" value="YYYY" /> - 
						<input class="input_field_3em" name="lastFour" id="lastFour_fi" value="XXXX" /><br />
						<label for="countryPrefix_fi">Phone number</label><br />
						<input class="input_field_35em" name="countryPrefix" id="countryPrefix_fi" value="+358" /> - 
						<input class="input_field_3em" name="areaCode" id="areaCode_fi" /> - 
						<input class="input_field_12em" name="phoneNumber" id="phoneNumber_fi" /><br />
						<label for="email_fi">*Email</label><br />
						<input class="input_field_12em" name="email" id="email_fi" /><br />	 						
					</div>
				</div>
				<div id="confirmation" class="step">
					<span class="font_normal_07em_black">Finnish last step - Username</span><br />
					<div class="input">
						<label for="username">User name</label><br />
						<input class="input_field_12em" name="username" id="username" /><br />
						<label for="password">Password</label><br />
						<input class="input_field_12em" name="password" id="password" type="password" /><br />
						<label for="retypePassword">Retype password</label><br />
						<input class="input_field_12em" name="retypePassword" id="retypePassword" type="password" /><br />
					</div>
				</div>
				<div id="summary" class="step">
					<span class="font_normal_07em_black">Summary page</span><br />
					<p>Please verify your information below.</p>
					<div id="summaryContainer"></div>
				</div>
				</div>
				<div id="demoNavigation"> 							
					<input class="navigation_button" id="back" value="Back" type="reset" />
					<input class="navigation_button" id="next" value="Next" type="submit" />
				</div>
			</form>
			<hr />
			
			<p id="data"></p>
		</div>

    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>		
    <script type="text/javascript" src="../js/jquery.form.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.js"></script>
    <script type="text/javascript" src="../js/bbq.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script>
    <script type="text/javascript" src="../js/jquery.form.wizard.js"></script>
    
    <script type="text/javascript">

			var cache = {}; // caching inputs for the visited steps

			$("#demoForm").bind("step_shown", function(event,data){	
				if(data.isLastStep){ // if this is the last step...then
					$("#summaryContainer").empty(); // empty the container holding the 
					$.each(data.activatedSteps, function(i, id){ // for each of the activated steps...do
						if(id === "summary") return; // if it is the summary page then just return
						cache[id] = $("#" + id).find(".input"); // else, find the div:s with class="input" and cache them with a key equal to the current step id
						cache[id].detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled"); // detach the cached inputs and append them to the summary container, also show and enable them
					});
				}else if(data.previousStep === "summary"){ // if we are movin back from the summary page
					$.each(cache, function(id, inputs){ // for each of the keys in the cache...do
						var i = inputs.detach().appendTo("#" + id).find(":input");  // put the input divs back into their normal step
						if(id === data.currentStep){ // (we are moving back from the summary page so...) if enable inputs on the current step
							 i.removeAttr("disabled");
						}else{ // disable the inputs on the rest of the steps
							i.attr("disabled","disabled");
						}
					});
					cache = {}; // empty the cache again
				}
			})

			$(function(){
				$("#demoForm").formwizard({ 
				 	formPluginEnabled: true,
				 	validationEnabled: true,
				 	focusFirstInput : true,
				 	formOptions :{
						success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
						beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
						dataType: 'json',
						resetForm: true
				 	}	
				 }
				);
  		});
    </script>
	</body>
</html>
